/**
 * @class Ext.form.field.Base
 */

/**
 * Style for read-only fields
 *
 * cls: 'x-form-readonly'
 */

@mixin nx-form-field-readonly {
  color: $color-charcoal;
  opacity: 1;  
}

.x-form-field[readonly].x-form-field:not([role="combobox"]),
.x-form-readonly input[role="combobox"] {
  @include nx-form-field-readonly;
}

.x-form-readonly {
  .x-form-trigger-wrap-default {
    border: none;
  }
  .nx-boxlabel {
    display: none;
  }
}

/**
  * editable = false on a combo sets readonly already, so use a custom class to achieve the same effect
  */
.nx-combo-disabled {
  input {
    @include nx-form-field-readonly;
  }
}

.x-form-fieldcontainer .x-mask {
  background-color: $color-gainsboro;
  opacity: 0.6;
}

/**
 * Styles which allow for horizontal alignment of form fields
 */

.nx-float-left {
  position: relative;
  float: left !important;
  margin-right: 5px;
}

.nx-interstitial-label {
  font-size: 13px;
  padding-top: 5px;
}

.nx-clear-both {
  clear: both;
}

/**
 * Styling for the boxlabel of form fields
 */
.x-field .nx-boxlabel {
  font-size: $font-size-utility;
}

/**
 * IE10 adds a second 'x' icon to text fields. Hide this.
 */
::-ms-clear {
  width: 0;
  height: 0;
}

//hack to have the error text shown properly with grow enabled, required for non-FF browsers
.x-form-text-grow.x-form-textarea-body {
  padding-bottom: 10px;
}

//hack to not set the above padding on FF browsers (where it isn't necessary
@-moz-document url-prefix() {
  .x-form-text-grow.x-form-textarea-body {
    padding-bottom: unset;
  }
}
